<template>
	<div id="app" :style="divBack" @contextmenu.prevent="handleRightClick">
		<div @click.capture="handleClickOutside" class="weather-time"
			:style="'transform: translateY('+(isBlur?'-180px':'-140px')+')'">
			<div class="times">{{hour}}
				<t class="separator">:</t> {{minute}}
			</div>
			<div class="data">{{month}}月{{day}} {{weekList[weekDay]}}</div>
		</div>
		<div class="search-input" :style="'transform: translateY('+(isBlur?'-60px':'+20px')+')'"><!---->
			<div class="all">
				<div class="engine" @click="ck_search()" title="切换搜索引擎">
					<i class="el-icon-help"></i>
				</div>
				<input v-if="!isBlur" @focus="ck_isBlur()" class="input" id="main-input" type="text" label="search"
					title="请输入搜索内容" autocomplete="false" placeholder="搜点什么">
				<el-input v-if="isBlur" @change="ck_isBlur()" @blur="ck_isBlur()" v-model="searchDate"
					placeholder="请输入内容"></el-input>
				<div title="搜索">
					<i class="el-icon-search"></i>
				</div>
				<div class="engine-choose" v-if="isSearch && isBlur"
					style="border-radius: 16px;background-color: #d9e8fa5c;">
					<div class="stick-data">
						<div class="stick-label" v-for="(item,index) in searchList" :key='index'>
							<img class="search-label-img" :src="item.img"></img>{{item.name}}
						</div>
						<div class="stick-label" @click="addSarch">
							<img class="search-label-img"
								src="https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png"></img>自定义
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<el-dialog title="快捷导航" :close-on-click-modal="false" :close-on-press-escape="false" width="50%"
				:visible.sync="rightClick">
				<div class="stick-data">
					<div class="navigation" v-for="(item,index) in rightClickList" @click="openClick(item.url)"
						:key='index'>
						<img class="search-label-img" :src="item.img"></img>{{item.name}}
					</div>
					<div class="navigation" @click="showRightClick()">
						<img class="search-label-img"
							src="https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png"></img>自定义
					</div>
				</div>
			</el-dialog>
			<el-dialog title="自定义快捷导航" :close-on-click-modal="false" :close-on-press-escape="false" width="50%"
				:visible.sync="addRightClick">
				<el-form :model="addFrom">
					<el-form-item label="请输入快捷导航名称：">
						<el-input style="width: 30%;" v-model="addFrom.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="请输入快捷导航地址：">
						<el-input style="width: 30%;" v-model="addFrom.url" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addRightClick=false">取 消</el-button>
					<el-button type="primary" @click="AetRightClick">确 定</el-button>
				</div>
			</el-dialog>
			<el-dialog title="自定义搜索引擎" :close-on-click-modal="false" :close-on-press-escape="false" width="50%"
				:visible.sync="dialogSearch">
				<el-form :model="addFrom">
					<el-form-item label="请输入引擎名称：">
						<el-input style="width: 30%;" v-model="addFrom.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="请输入引擎地址：">
						<el-input style="width: 30%;" v-model="addFrom.url" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogSearch=false">取 消</el-button>
					<el-button type="primary" @click="setAddSearch">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<div class="footer">
			爱极简主页 2024 关于
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				divBack: {
					backgroundImage: 'url("https://www.cooldaohang.com/themes/thinkadmin/public/assets/image/img/bg1.webp")'
				},
				isBlur: false,
				isSearch: false,
				searchList: [{
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}],
				searchDate: '',
				dialogSearch: false,
				addFrom: {
					name: '',
					url: ''
				},
				rightClick: false,
				addRightClick: false,
				rightClickList: [{
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "https://www.baidu.com"
				}, {
					name: '腾讯',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "https://www.baidu.com"
				}, {
					name: '微信',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}],
				weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				month: '',
				day: '',
				hour: '',
				minute: '',
				weekDay: '',
			}
		},
		created() {
			this.getDateInfo();
		},
		methods: {
			openClick(url) {
				window.open(url, '_blank');
			},
			handleRightClick() {
				this.rightClick = true;
			},
			showRightClick() {
				this.addRightClick = true;
			},
			AetRightClick() {
				this.rightClickList.push({
					name: this.addFrom.name,
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: this.addFrom.url
				})
				this.addFrom = {
					name: '',
					url: ''
				}
				this.addRightClick = false
			},
			setAddSearch() {
				this.searchList.push({
					name: this.addFrom.name,
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: this.addFrom.url
				})
				this.addFrom = {
					name: '',
					url: ''
				}
				this.dialogSearch = false
			},
			addSarch() {
				this.dialogSearch = true;
			},
			handleClickOutside(event) {
				// 检查点击的元素是否不是输入框
				console.log(event.target.tagName.toLowerCase());
				if (event.target.tagName.toLowerCase() !== 'input' && this.isBlur) {
					// 执行你需要的操作
					this.ck_isBlur()
				}
			},
			ck_isBlur() {
				this.isBlur = !this.isBlur
			},
			ck_search() {
				if (this.isBlur == false) {
					this.isBlur = true;
				}
				this.isSearch = !this.isSearch;
			},
			getDateInfo() {
				let that = this;
				var currentTime = new Date();
				that.month = currentTime.getMonth() + 1;
				that.day = currentTime.getDate();
				that.hour = currentTime.getHours();
				that.minute = currentTime.getMinutes();
				that.weekDay = currentTime.getDay();
				setTimeout(function() {
					that.getDateInfo()
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	#app {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.weather-time {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		transform: translateY(-140px);
		color: '#fff';
		animation: fade-time-in .6s cubic-bezier(.21, .78, .36, 1);
		transition: transform .3s, opacity .5s, margin-bottom .3s;
		z-index: 1;
	}

	.weather-time .times {
		cursor: pointer;
		font-size: 3rem;
		margin: 6px 0;
		transition: transform .3s;
	}

	.weather-time .data {
		font-size: 1.15rem;
		opacity: .8;
		margin: 4px 0;
	}

	.footer {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		height: 50px;
		width: 100%;
		color: '#fff';
		z-index: 1;
	}

	.search-input {
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		max-width: 680px;
		width: calc(100% - 60px);
		transition: transform .3s, opacity .5s, margin-bottom .3s;
	}

	.search-input .all {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 42px;
		width: 100%;
		border-radius: 30px;
		color: '#fff';
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		opacity: 1;
		animation: fade-up-in .7s cubic-bezier(.37, .99, .36, 1);
		transition: transform .3s, background-color .3s, opacity .5s;
		z-index: 1;
	}

	.search-input .all .engine,
	.search-input .all .go {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 64px;
		font-size: 20px;
		border-radius: 30px;
		transition: background-color .3s, opacity .3s;
	}

	.search-input .all .input {
		display: flex;
		justify-content: center;
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 16px;
		color: '#fff';
	}

	[class*=" el-icon-"],
	[class^=el-icon-] {
		color: #ffffff;
	}

	.engine-choose {
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		z-index: 1;
		backdrop-filter: blur(30px) saturate(1.25);
		box-sizing: border-box;
	}

	.stick-data {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.stick-label {
		border-radius: 16px;
		width: 46%;
		margin: 1%;
		background-color: aliceblue;
		padding: 1%;
		line-height: 20px;
	}

	.navigation {
		border-radius: 16px;
		width: 28%;
		margin: 1%;
		background-color: aliceblue;
		padding: 1%;
		line-height: 20px;
	}

	.search-label-img {
		width: 20px;
		height: 20px;
		padding-right: 10px;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.separator {
		animation: blink 1.5s infinite;
	}
</style>